<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 核心标签是最常用的JSTL标签 -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%><!-- 包含一系列标准函数,大部分 是通用的字符串处理函数 -->
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><!-- 格式化并输出文本、日期、时间、数字 -->
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!doctype html>
<html>
<head>
    <title>所有房间</title>
    <base href="<%=basePath%>" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="i/buyu.ico">
    <link rel="apple-touch-icon-precomposed" href="i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/MyCSS.css">
    <!-- 适应所有设备 -->
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .layui-form-label {
            width: 150px;
            font-size: 18px;
            text-align: left;
            padding-right: 0px;
            margin-right: 0px;
        }

        .layui-input-block {

        }

        .layui-nav {
            width: 40%;
            padding: 0px;
        }

        .layui-nav .layui-nav-item {
            width: 20%;
        }

        .layui-tab {
            height: 600px;
            overflow-y: auto;
            margin: 0px;
        }
    </style>
</head>
<body>
<br/>
<div class="layui-tab layui-tab-card" lay-filter="Fish_tabs" style="height:100%;">
<%--    <ul class="layui-tab-title">--%>
<%--        <li class="layui-this" lay-id="1">初级房</li>--%>
<%--        <li lay-id="2">中级房</li>--%>
<%--        <li lay-id="3">高级房 </li>--%>
<%--    </ul>--%>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div>
                <span><b>&nbsp;总输赢:&nbsp;</b> </span><span id="winlose" style="color: red"></span>
                <span><b>&nbsp;系统当前血池:&nbsp;</b> </span><span id="Inventory" style="color: red"></span>
                <span><b>&nbsp;总彩池:&nbsp; </b></span><span id="countGold" style="color: red"></span>
            </div>
            <table class="layui-table" lay-skin="nob" id="roomTable" lay-filter="roomTable"></table>
        </div>
    </div>
</div>
<br />

<%--<script type="text/html" id="IsBusinessman">--%>
<%--    {{#  if(d.IsBusinessman === false){ }}--%>
<%--                    <span class="layui-badge layui-bg-green">玩家</span>--%>
<%--                {{#  } else if(d.IsBusinessman === true){ }}--%>
<%--                    <span class="layui-badge layui-bg-blue">会长</span>--%>
<%--                {{#  } }}--%>
<%--</script>--%>

<script type="text/html" id="playertable">
    <a class="layui-btn layui-btn-primary layui-btn-xs layui-bg-green" lay-event="edit">修改血池</a>
</script>

<script type="text/html" id="RealGain">
    {{#  d.RealGain = d.TotalCurrencyWin - d.TotalCurrencyLost }}
                     <span>{{ d.RealGain }}</span>
                {{#  }}
</script>

<script src="js/jQuery-2.2.0.min.js"></script>
<script src="layui/layui.js"></script>
<script src="js/common/monitor_back.js"></script>
<script type="text/javascript">
    layui.use(['layer','element','table','form'],function(){
        var layer = layui.layer
            ,element = layui.element
            ,table = layui.table
            ,form = layui.form;
        layer.config({
            extend: 'MySkin/style.css'
        });

        //禁止服务器点击
        $(document).ready(function(){
            $("#ServerId").attr("disabled","true");
        });

        // table.render({
        //     elem:'#difficult',
        //     url:'room/fruitMarRroom',
        //     method:'post',
        //     totalRow:true,
        //     page:false,
        //     cellMinWidth:80,
        //     id:'Alltable2',
        //     where:{
        //         gameId : 8
        //     },
        //     cols: [[
        //         {field : 'AllWaterLine',title : '水位',align : 'center'},
        //         {field: 'AllFeeGrab',title: '平台收益',align: 'center'},
        //         {field : 'AllBonusPool',title : '彩金池奖金',align : 'center'},
        //         {field : 'WaterLineLimit',title : '水位界限',align : 'center',hide:true},
        //         { field : 'DifficultAllLevel',title : '当前难度级别',align : 'center',templet:'#DifficultAllLevel'},
        //         {title : '操作',fixed : 'right',align : 'center',toolbar : '#tool'}
        //     ]],
        //     response:{
        //         statusCode : 200
        //     },
        //     parseData: function(res){
        //         console.log(res);
        //         return{
        //             "code":res.status,
        //             "msg":res.message,
        //             "count":res.count,
        //             "data":res.data
        //         };
        //     }
        // });


        var gameIds = "8,12";
        table.render({
            elem: '#roomTable',
            url: 'room/getRoom',
            method: 'post',
            title: '房间',
            totalRow: true,
            autoSort: false,
            cellMinWidth: 50, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            id: 'AllTable',
            request: {
                pageName: 'PageIndex',
                limitName: 'PageCount'
            },
            where: {
                gameIds: gameIds
                // gameId : 8
            },
            cols: [[
                {field: 'RoomID',title: '房间号'},
                {field: 'gameName',title: '游戏名'},
                {field: 'HP',title: '血池平衡值'},
                {field:'Inventory',title:'当前剩余血池'},
                {field: 'WinLose',title: '总输赢',sort: true},
                {field: 'CurrentWinLose',title: '当日输赢'},
                {field: 'GoldScore',title: '奖金彩池',sort: true},
                {title: '操作',fixed: 'right',width: 200,toolbar: '#playertable'}
            ]],
            page:{
                limit: 30,
                limits: [10, 20, 30, 40, 50],
            }, //分页
            response: {
                statusCode: 200
                //重新规定成功的状态码为 200，table 组件默认为 0
            },
            parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
                var countWinLose = 0;
                var Inventory = 0;
                var countGold = 0;
                console.log(res);
                for (let i = 0; i < res.data.length; i++) {
                    countGold = countGold + res.data[i].GoldScore;
                    countWinLose = countWinLose + res.data[i].WinLose;
                    Inventory = Inventory + res.data[i].Inventory;
                }
                $("#winlose").html(countWinLose);
                $("#Inventory").html(Inventory);
                $("#countGold").html(countGold);
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                    //解析数据列表
                };
            }
        });


        setInterval(function(){
            table.reload('AllTable', {
                where: {
                    gameId: gameIds
                }
            });
        },60000);


        var roomNum;
        var gameId;
        //在线玩家
        //监听行工具事件
        table.on('tool(roomTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            if (history.state == null){
                pushHistory();
            }
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
                roomNum = data.RoomID;
                gameId = data.gameId;
            if(layEvent === 'edit'){
                var index = layer.open({
                    type: 2,
                    shadeClose: true,
                    shade: 0.5,
                    area: ['500px', '200px'],
                    title: '修改血池',
                    skin: 'layer-ext-yourskin',
                    content: '<%=basePath%>room/editHP',
                    success: function(layero, index) {
                        var body = layer.getChildFrame("body", index);
                        // 取到弹出层里的元素，并把编辑的内容放进去
                        localStorage.setItem("gameId",gameId);
                        localStorage.setItem("roomNum",roomNum);
                        body.find("#roomNum").val(roomNum);

                    },
                    cancel:function () {
                        window.history.back();
                    }
                });
            }
        });

        //监听选项卡切换
        // element.on('tab(Fish_tabs)',function(data){
        //     document.getElementById('Fish_Tabindex').value = data.index + 1;
        //     table.reload('Alltable2',{
        //         page : {cuur : 1},
        //         where:{ConfigId:$('#Fish_Tabindex').val()}
        //     });
        //     table.reload('AllTable', {
        //         where: {
        //             Room : $('#Fish_Tabindex').val() == 1?"拉霸-房间1":$('#Fish_Tabindex').val() == 2?"拉霸-房间2":"拉霸-房间3",
        //         }
        //     });
        //     return false;
        // });


    });
</script>
</body>
</html>